<template>
    <view class="list">
        <view v-if="info.onlineStatus == deviceConnectStatus.Offline" class="list-title red">
            {{ info.name }}：离线
        </view>
        <view v-else :class="[
            'list-title',
            {
                orange: info.status == deviceStatus.Idle
            }
        ]">
            {{ info.name }}：{{
                g_options.getOptionText(
                    g_options.deviceStatusOptions,
                    info.status,
                    '--'
                )
            }}
        </view>
        <view :class="['list-content']" @click="emit('click', deviceInfo)">
            <view class="lc-left">
                <image :src="deviceInfo.recipeInfo?.picturePath" mode="aspectFit" class="recipe-img" />
                <warning-modal-icon @click.stop class="alert-icon" :deviceSn="info.sn" />
                <view v-if="
                    info.onlineStatus == deviceConnectStatus.Offline ||
                    info.status == deviceStatus.Idle
                " class="mask-wrap">
                    <image :src="info.onlineStatus == deviceConnectStatus.Offline
                        ? getViteImageUrl('cooking/offline.png')
                        : getViteImageUrl('cooking/idle.png')
                        " class="mask-img" />
                </view>
            </view>
            <view class="lc-center">
                <view :class="[
                    'name',
                    {
                        disabled:
                            info.status !== deviceStatus.ManualCooking &&
                            (info.status == deviceStatus.Idle ||
                                info.onlineStatus == deviceConnectStatus.Offline)
                    }
                ]">
                    {{
                        info.status == deviceStatus.ManualCooking
                            ? '手动烹饪'
                            : deviceInfo.recipeInfo?.name
                    }}
                </view>
                <view v-if="info.status !== deviceStatus.ManualCooking" class="step-content">
                    <view v-if="deviceInfo.cookingInfo?.step > 0" class="step">
                        步骤{{ deviceInfo.cookingInfo?.step }}/{{
                            deviceInfo.recipeInfo?.stepList?.length || 0
                        }}：{{
                            deviceInfo.recipeInfo?.stepList?.[
                                deviceInfo.cookingInfo?.step - 1
                            ]?.name
                        }}
                    </view>
                    <view v-else class="step">
                        步骤0/{{ deviceInfo.recipeInfo?.stepList?.length || 0 }}：
                    </view>
                    <view class="duration">
                        {{
                            deviceInfo.recipeInfo?.stepList?.[
                                deviceInfo.cookingInfo?.step - 1
                            ]?.timeOffset || 0
                        }}s
                    </view>
                </view>
                <view v-if="info.status !== deviceStatus.ManualCooking" class="btns">
                    <nw-Button v-if="info.status === deviceStatus.Idle" text="关机"
                        @click="emit('shutdown', info)"></nw-Button>
                    <!-- <nw-Button
                  v-if="row.status === deviceStatus.Idle"
                  text="自动洗锅"
                  @click="handleAutoWashPot(row)"
                ></nw-Button> -->
                    <!-- <nw-Button
                  v-if="row.status === deviceStatus.Idle"
                  text="手动洗锅"
                  @click="handleManualWashPot(row)"
                ></nw-Button> -->
                    <nw-Button v-if="info.status === deviceStatus.Idle" text="洗锅" @longpress="emit('auto-washpot', info)"
                        @click="emit('manual-washpot', info)"></nw-Button>
                    <nw-Button v-if="info.status === deviceStatus.ManualWashPot" text="完成洗锅"
                        @click="emit('complete-washpot', info)"></nw-Button>
                    <nw-Button v-if="info.status == deviceStatus.Cooking" text="暂停"
                        @click="emit('pause', info)"></nw-Button>
                    <nw-Button v-if="info.status == deviceStatus.Pause" text="继续"
                        @click="emit('continue', info)"></nw-Button>
                    <nw-Button v-if="
                        info.status === deviceStatus.Cooking ||
                        info.status === deviceStatus.Pause
                    " text="终止" @click="emit('stop', info)"></nw-Button>
                    <nw-Button v-if="info.status === deviceStatus.WaitPlating" text="开始出菜"
                        @click="emit('outpot', info)"></nw-Button>
                    <nw-Button v-if="info.status === deviceStatus.InPlating" text="完成出菜"
                        @click="emit('complete-outpot', info)"></nw-Button>
                    <!-- @touchstart="startTimer"
                  @touchend="endTimer" 
                  @touchcancel="endTimer"-->
                </view>
            </view>
            <view v-if="info.status !== deviceStatus.ManualCooking" class="lc-right">
                <progressBarChart :key="info.sn" :value="deviceInfo.progress" :title="deviceInfo.progressText"
                    :showSubText="false" />
            </view>
        </view>
    </view>
</template>

<script setup>
import WarningModalIcon from './WarningModalIcon/index.vue'
import progressBarChart from './progressBarChart.vue'


const props = defineProps({
    info: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['click','shutdown', 'auto-washpot', 'manual-washpot', 
    'complete-washpot', 'pause', 'continue', 'stop', 'outpot', 'complete-outpot'])

const deviceConnectStatus = g_i.device.DeviceConnectStatus
const deviceStatus = g_i.device.DeviceStatus
const cookingStore = useCookingStore()

// 获取设备列表下的菜谱信息与烹饪信息
const deviceInfo = computed(() => {
  const item = g_.cloneDeep(props.info)
  const cookingInfo = cookingStore.getLatestCookInfoForDevice(item.sn) || {}
  const recipeInfo = g_busTool.getRecipeInfoById(cookingInfo.recipeId) || {}
    // 对菜谱的步骤时长进行数字化处理
  const newRecipeInfo = g_.cloneDeep(recipeInfo)
  newRecipeInfo.stepList = (newRecipeInfo.stepList || []).map(item => {
    item.timeOffset = item.timeOffset * 1
    return item
  })
  const progressObj = g_busTool.calculateProgress(
    cookingInfo,
    newRecipeInfo,
    item
  )
  console.log('菜谱烹饪进度-更新', progressObj)

  return {
    ...item,
    cookingInfo,
    recipeInfo: newRecipeInfo,
    progress: progressObj.progress,
    progressText: `${progressObj.progress}%`,
    curStepProgress: progressObj.curStepProgress
  }
})

watch(
  () => deviceInfo.value,
  (nv, ov) => {
    console.log('deviceInfo.value 值变化:', nv)
    if (!ov) return
   
    // 比对新旧值，判断设备的步骤是否变化，调料余量是否变化
    // 判断该步骤是否为调料步骤
    const stepData = nv.recipeInfo.stepList[nv.cookingInfo.step - 1]
    if (
        nv.cookingInfo.step !== ov.cookingInfo.step &&
        stepData &&
        stepData.ingredientType === 'flavour'
    ) {
        props.info.peripheralList.find(it => { 
            if (it.ingredientCode + '' === stepData.target + '') {
                //TODO goal 值需要通过系数 换算
                const remain = it.ingredientRemain - stepData.goal
                it.ingredientRemain = remain > 0 ? remain : 0
                return true
            }
        })
    }
    
  },
  {
    immediate: true,
    deep: true
  }
)

</script>

<style lang="scss" scoped>
.list {
    padding: 0 20rpx 0 22rpx;
    box-sizing: border-box;
}


.list-title {
  padding: 18rpx 16rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: var(--main-theme);
  &.orange {
    color: #fbac2b;
  }
  &.red {
    color: #eb2534;
  }
}

.list-content {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 16rpx 22rpx 16rpx 16rpx;
  background-color: var(--bg-color);
  border-radius: 18rpx;
  box-sizing: border-box;
  .lc-left {
    flex-shrink: 0;
    position: relative;
    border-radius: 22rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    overflow: hidden;
    .recipe-img {
      display: block;
      width: 180rpx;
      height: 180rpx;
      background-color: var(--body-theme);
    }
    .alert-icon {
      position: absolute;
      z-index: 11;
      top: 0;
      right: 0;
      width: 50rpx;
    }
    .mask-wrap {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(2, 6, 14, 0.33);
      .mask-img {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
  .lc-center {
    flex: 1;
    margin-left: 18rpx;
    padding-top: 7rpx;
    .name {
      font-size: 24rpx;
      font-weight: 400;
      color: var(--color-000);
      &.disabled {
        color: var(--color-999);
      }
    }
    .step-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 20rpx;
      line-height: 20rpx;
      margin-top: 20rpx;
      padding: 6rpx 18rpx 6rpx 10rpx;
      border-radius: 8rpx;
      background-color: var(--sub-theme);
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
      .step {
      }
      .duration {
        padding-left: 10rpx;
      }
    }

    .btns {
      display: flex;
      align-items: center;
      margin-top: 34rpx;
      .nw-button-wrap {
        &.nw-button-wrap {
          margin-left: 14rpx;
        }
        :deep(.nw-button) {
          height: 54rpx;
          margin: initial;
          padding: 0 28rpx;
          border-radius: 28rpx;
          box-sizing: border-box;
          .u-button__text {
            font-size: 22rpx !important;
            font-weight: 400;
          }
          &:not(.u-button--disabled) .u-button__text {
            color: var(--color-fff);
          }
        }
      }
    }
  }
  .lc-right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 32rpx;
  }
}
</style>